<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Tuding的24列栅格</title>
<link rel="stylesheet" href="../css/prettify.css" type="text/css" />
<script type="text/javascript" src="../js/prettify.js"></script>
</head>

<body onload="prettyPrint()">
<h1>Tuding的24列栅格</h1>
<hr />
<pre class="prettyprint linenums">
@charset "utf-8";
/* grid-24 Copyright(c)bubujie.net */
/* container */
.container {
	margin-left: auto;
	margin-right: auto;
	width: 960px;
}
.grid-1, .grid-2, .grid-3, .grid-4, .grid-5, .grid-6, .grid-7, .grid-8, .grid-9, .grid-10, .grid-11, .grid-12, .grid-13, .grid-14, .grid-15, .grid-16, .grid-17, .grid-18, .grid-19, .grid-20, .grid-21, .grid-22, .grid-23, .grid-24 {
	display: inline;
	float: left;
	position: relative;
	margin-left: 5px;
	margin-right: 5px;
}
/* alpha and omega */
.alpha { margin-left: 0; }
.omega { margin-right: 0; }
/* grid-N:width(40N-10) */
.grid-1  { width:  30px; }
.grid-2  { width:  70px; }
.grid-3  { width: 110px; }
.grid-4  { width: 150px; }
.grid-5  { width: 190px; }
.grid-6  { width: 230px; }
.grid-7  { width: 270px; }
.grid-8  { width: 310px; }
.grid-9  { width: 350px; }
.grid-10 { width: 390px; }
.grid-11 { width: 430px; }
.grid-12 { width: 470px; }
.grid-13 { width: 510px; }
.grid-14 { width: 550px; }
.grid-15 { width: 590px; }
.grid-16 { width: 630px; }
.grid-17 { width: 670px; }
.grid-18 { width: 710px; }
.grid-19 { width: 750px; }
.grid-20 { width: 790px; }
.grid-21 { width: 830px; }
.grid-22 { width: 870px; }
.grid-23 { width: 910px; }
.grid-24 { width: 950px; }
/* prefix-N:padding-left(40N) */
.prefix-1  { padding-left:  40px; }
.prefix-2  { padding-left:  80px; }
.prefix-3  { padding-left: 120px; }
.prefix-4  { padding-left: 160px; }
.prefix-5  { padding-left: 200px; }
.prefix-6  { padding-left: 240px; }
.prefix-7  { padding-left: 280px; }
.prefix-8  { padding-left: 320px; }
.prefix-9  { padding-left: 360px; }
.prefix-10 { padding-left: 400px; }
.prefix-11 { padding-left: 440px; }
.prefix-12 { padding-left: 480px; }
.prefix-13 { padding-left: 520px; }
.prefix-14 { padding-left: 560px; }
.prefix-15 { padding-left: 600px; }
.prefix-16 { padding-left: 640px; }
.prefix-17 { padding-left: 680px; }
.prefix-18 { padding-left: 720px; }
.prefix-19 { padding-left: 760px; }
.prefix-20 { padding-left: 800px; }
.prefix-21 { padding-left: 840px; }
.prefix-22 { padding-left: 880px; }
.prefix-23 { padding-left: 920px; }
.prefix-24 { /* n/a */ }
/* suffix-N:padding-right(40N) */
.suffix-1  { padding-right:  40px; }
.suffix-2  { padding-right:  80px; }
.suffix-3  { padding-right: 120px; }
.suffix-4  { padding-right: 160px; }
.suffix-5  { padding-right: 200px; }
.suffix-6  { padding-right: 240px; }
.suffix-7  { padding-right: 280px; }
.suffix-8  { padding-right: 320px; }
.suffix-9  { padding-right: 360px; }
.suffix-10 { padding-right: 400px; }
.suffix-11 { padding-right: 440px; }
.suffix-12 { padding-right: 480px; }
.suffix-13 { padding-right: 520px; }
.suffix-14 { padding-right: 560px; }
.suffix-15 { padding-right: 600px; }
.suffix-16 { padding-right: 640px; }
.suffix-17 { padding-right: 680px; }
.suffix-18 { padding-right: 720px; }
.suffix-19 { padding-right: 760px; }
.suffix-20 { padding-right: 800px; }
.suffix-21 { padding-right: 840px; }
.suffix-22 { padding-right: 880px; }
.suffix-23 { padding-right: 920px; }
.suffix-24 { /* n/a */ }
/* push-N:left(40N) */
.push-1  { left:  40px; }
.push-2  { left:  80px; }
.push-3  { left: 120px; }
.push-4  { left: 160px; }
.push-5  { left: 200px; }
.push-6  { left: 240px; }
.push-7  { left: 280px; }
.push-8  { left: 320px; }
.push-9  { left: 360px; }
.push-10 { left: 400px; }
.push-11 { left: 440px; }
.push-12 { left: 480px; }
.push-13 { left: 520px; }
.push-14 { left: 560px; }
.push-15 { left: 600px; }
.push-16 { left: 640px; }
.push-17 { left: 680px; }
.push-18 { left: 720px; }
.push-19 { left: 760px; }
.push-20 { left: 800px; }
.push-21 { left: 840px; }
.push-22 { left: 880px; }
.push-23 { left: 920px; }
.push-24 { /* n/a */ }
/* pull-N:left(-40N) */
.pull-1  { left:  -40px; }
.pull-2  { left:  -80px; }
.pull-3  { left: -120px; }
.pull-4  { left: -160px; }
.pull-5  { left: -200px; }
.pull-6  { left: -240px; }
.pull-7  { left: -280px; }
.pull-8  { left: -320px; }
.pull-9  { left: -360px; }
.pull-10 { left: -400px; }
.pull-11 { left: -440px; }
.pull-12 { left: -480px; }
.pull-13 { left: -520px; }
.pull-14 { left: -560px; }
.pull-15 { left: -600px; }
.pull-16 { left: -640px; }
.pull-17 { left: -680px; }
.pull-18 { left: -720px; }
.pull-19 { left: -760px; }
.pull-20 { left: -800px; }
.pull-21 { left: -840px; }
.pull-22 { left: -880px; }
.pull-23 { left: -920px; }
.pull-24 { /* -n/a */ }
/* clear */
.clear {
	clear: both;
	display: block;
	overflow: hidden;
	visibility: hidden;
	width: 0;
	height: 0;
}
/* clearfix */
.clearfix:after {
	clear: both;
	content: ' ';
	display: block;
	font-size: 0;
	line-height: 0;
	visibility: hidden;
	width: 0;
	height: 0;
}
/* clearfix for IE6 + IE7 */
* html .clearfix, *:first-child+html .clearfix { zoom: 1; }
/* showgrid */
.showgrid { background: url(src/grid.png); }

</pre>
<hr />
<div id="colophon">
  <address>
  <a href="http://www.bubujie.com/" target="_blank" class="logo"><img src="../img/logo_16px.gif" width="48" height="20" alt="步步街"></a> <em>Copyright ©</em> <a href="http://www.bubujie.com/" target="_blank">步步街银川网络商城</a> <span>All Rights Reserved.</span>
  </address>
</div>
</html>
